import React, {useEffect, useState} from 'react'
import {Button, Space, message, Popconfirm, Tag} from 'antd'

import type {ColumnsType} from 'antd/es/table'
import {history} from 'umi'
// import Modal from '@/components/Modal';
import styles from './index.less'
import CustomTable from '@/components/Table'

import {getchildList, delectDict} from '@/service/tool/dict'

import 'moment/locale/zh-cn'

const dictData = (props: any) => {
	const [loading, setLoading] = useState(false)
	// const [selectId, setSelectId] = useState('');
	// const [isModalOpen, setIsModalOpen] = useState(false);
	const [dictId, setId] = useState<string>()
	const [type, setType] = useState<string>()

	const [tableList, setTableList] = useState<any[]>([])

	// 获取表格数据
	const onListFun = (id: string) => {
		setLoading(true)
		getchildList({parentId: id})
			.then((res: any) => {
				if (res?.success) {
					setTableList(() => res?.data)
					setLoading(false)
				}
			})
			.catch(() => {
				setLoading(false)
			})
	}

	useEffect(() => {
		// eslint-disable-next-line no-shadow
		const {id, type} = props.location.query
		setId(() => id)
		setType(type)

		// 表格查询
		onListFun(id)
	}, [])

	// 删除事件
	const onDeleteFun = (ids: string) => {
		const {id} = props.location.query
		delectDict({id: ids})
			.then((res) => {
				if (res.success) {
					message.success(res.msg)
					onListFun(id)
				}
			})
			.catch((err) => {
				message.error(err)
			})
	}

	const columns: ColumnsType<InitiationAPI.InitiationColumns> = [
		{
			title: '字典名称',
			dataIndex: 'valueName',
			align: 'center',
			render: (text) => <span>{text}</span>,
		},
		{
			title: '字典值',
			dataIndex: 'value',
			align: 'center',
			render: (text) => <span>{text}</span>,
		},
		{
			title: '字典状态',
			dataIndex: 'status',
			align: 'center',
			render: (text) => (
				<>
					{text === 1 ? (
						<Tag color="processing">有效</Tag>
					) : (
						<Tag color="processing">无效</Tag>
					)}
				</>
			),
		},
		{
			title: '修改时间',
			dataIndex: 'modified',
			align: 'center',
			render: (text) => <span>{text || '--'}</span>,
		},
		{
			title: '字典描述',
			dataIndex: 'description',
			align: 'center',
			render: (text) => <span>{text || '--'}</span>,
		},
		{
			title: '操作',
			key: 'action',
			align: 'center',
			fixed: 'right',
			width: 250,
			render: (text, record) => (
				<div>
					<Button
						type="link"
						size="small"
						onClick={() => {
							history.push({
								pathname: '/tool/dict/data/view',
								query: {
									id: record.id,
								},
							})
						}}>
						详情
					</Button>
					<Button
						type="link"
						size="small"
						onClick={() => {
							history.push({
								pathname: '/tool/dict/data/edit',
								query: {
									id: record.id,
									type: type || '',
								},
							})
						}}>
						编辑
					</Button>
					<Popconfirm
						placement="topLeft"
						title="你确定要删除这条字典数据吗？"
						onConfirm={() => onDeleteFun(record.id)}
						okText="确定"
						cancelText="取消">
						<Button type="link" size="small">
							删除
						</Button>
					</Popconfirm>
				</div>
			),
		},
	]

	const addDict = () => {
		history.push({
			pathname: '/tool/dict/data/add',
			query: {
				pid: dictId || '',
				type: type || '',
			},
		})
	}

	return (
		<div className={styles.page}>
			<div className="btnlist">
				<Space size={12}>
					<Button type="primary" ghost size="small" onClick={addDict}>
						新增
					</Button>
					<Button
						type="primary"
						size="small"
						onClick={() => {
							history.goBack()
						}}>
						返回
					</Button>
					{/* <Button
            danger
            ghost
            size="small"
            disabled={selectId === ''}
            onClick={() => onDeletesFun()}
          >
            删除
          </Button> */}
				</Space>
			</div>
			<div className="table">
				<CustomTable
					columns={columns}
					callback={() => {}}
					loading={loading}
					scroll={{y: 620}}
					// showRowSelection
					// selectCallback={(keys: any) => {
					//   setSelectId(() => keys?.join(','));
					// }}
					dataSource={tableList}
				/>
			</div>
			{/* <Modal
        text="确定要删除所选数据吗"
        onSubmit={submit}
        isModalOpen={isModalOpen}
        setIsModalOpen={setIsModalOpen}
      /> */}
		</div>
	)
}
export default dictData
